'use strict';
import React, { useState, useEffect, useRef } from 'react';
import { Input } from 'antd';
import styles from './index.less';

/*
* 组件注释
* create by wuqiong
* creation time 2022/04/25
* 拓展属性
* */

const { TextArea } = Input
const Index = (props) => {
  const { id } = props;
  const [documentation, setDocumentation] = useState("");
  const dataRef = useRef({});

  const updateDocumentation = (value, isRecord) => {
    isRecord && setDocumentation(value);
    (dataRef.current.bpmnElement && dataRef.current.bpmnElement.id === id) || (dataRef.current.bpmnElement = window.bpmnInstances.elementRegistry.get(id));
    const documentation = window.bpmnInstances.bpmnFactory.create("bpmn:Documentation", { text: value });
    window.bpmnInstances.modeling.updateProperties(dataRef.current.bpmnElement, {
      documentation: [documentation]
    });
  }
  useEffect(() => {
    if (id && id.length) {
      const documentations = window.bpmnInstances.bpmnElement.businessObject?.documentation;
      setDocumentation(documentations && documentations.length ? documentations[0].text : "")
    } else {
      setDocumentation("")
    }
    return () => dataRef.current.bpmnElement = null
  }, [id])
  return <div className={styles.other}>
    <div className={styles.label}>元素文档：</div>
    <div className={styles.value}>
      <TextArea
        value={documentation}
        className={styles.textArea}
        autoSize={{ minRows: 2, maxRows: 6 }}
        onChange={e => updateDocumentation(e.target.value, true)}
        onBlur={e => updateDocumentation(e.target.value)}
      />
    </div>

  </div>
};
export default Index;